<template>
  <div>
    <a-modal
      :title="isEdit ? '编辑' : '新增'"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :width="800"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model
        ref="ruleForm"
        :model="formData"
        :rules="rules"
        layout="horizontal"
        labelAlign="right"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
      >
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="用户名" prop="user_name" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-input v-model="formData.user_name" placeholder="请输入" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="真实姓名" prop="real_name" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-input v-model="formData.real_name" placeholder="请输入" /> </a-form-model-item
          ></a-col>
          <template v-if="!isEdit">
            <a-col :span="12">
            <a-form-model-item label="密码" :prop="isEdit ? '' : 'password'" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
              <a-input v-model="formData.password" :placeholder="isEdit ? '留空则不修改' : '请输入'" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              label="确认密码"
              :prop="isEdit ? '' : 'repeat_password'"
              :label-col="{ span: 8 }"
              :wrapper-col="{ span: 16 }"
            >
              <a-input v-model="formData.repeat_password" :placeholder="isEdit ? '留空则不修改' : '请输入'" />
            </a-form-model-item>
          </a-col>
        </template>
        </a-row>
        <a-form-model-item label="角色" prop="role_key">
          <a-select v-model="formData.role_key">
            <a-select-option :value="item.pkey" v-for="(item,index) in roleList" :key="index">{{item.role_name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="职务">
          <a-input v-model="formData.position" placeholder="请输入" />
        </a-form-model-item>
        <a-form-model-item label="数据权限类型" prop="data_permission_type">
          <a-select v-model="formData.data_permission_type">
            <a-select-option :value="0">全部数据</a-select-option>
            <a-select-option :value="1">指定部门</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="部门" v-if="formData.data_permission_type" prop="data_permission_depart_ids">
          <a-tree-select
            v-model="formData.data_permission_depart_ids"
            style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :tree-data="departmentList"
            tree-checkable
            allow-clear
            placeholder="请选择部门"
            tree-node-filter-prop="label"
            :replaceFields="{
              children: 'childs',
              label: 'dep_name',
              value: 'pkey',
            }"
          />
        </a-form-model-item>
        <a-form-model-item label="备注">
          <a-textarea v-model="formData.remark" :auto-size="{ minRows: 2, maxRows: 5 }" placeholder="请输入" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import { getDepartmentThreeListApi } from '@/api/people'
import { editAdminApi, getRoleListApi, getAdminDetailApi } from '@/api/manager'
export default {
  data() {
    return {
      isEdit: false,
      pkey: null,
      visible: false,
      confirmLoading: false,
      formData: {
        user_name: '', // 用户名
        password: '',
        repeat_password: '',
        real_name: '', // 真实姓名
        role_key: null, // 角色
        remark: '', // 备注
        position: '', // 职务
        data_permission_type: 0, // 数据权限类型
        data_permission_depart_ids: [], // 数据权限类型 指定部门
      },
      rules: {
        user_name: [{ required: true, message: '请输入用户名', trigger: 'change' }],
        password: [{ required: true, message: '请输入密码', trigger: 'change' }],
        repeat_password: [{ required: true, message: '请输入确认密码', trigger: 'change' }],
        real_name: [{ required: true, message: '请输入真实姓名', trigger: 'change' }],
        role_key: [{ required: true, message: '请选择角色', trigger: 'change' }],
        data_permission_type: [{ required: true, message: '请选择数据权限类型', trigger: 'change' }],
        data_permission_depart_ids: [{ required: true, message: '请选择部门', trigger: 'change' }],
      },
      departmentList: [], // 部门列表
      roleList: [], // 角色列表
    }
  },
  methods: {
    add() {
      this.isEdit = false
      this.visible = true
      this.getData()
    },
    edit(row) {
      this.isEdit = true
      this.visible = true
      this.pkey = row.pkey
      this.getData()
      this.getAdminDetail()
    },
    getData() {
      this.getDepartmentThreeList()
      this.getRoleList()
    },
    handleOk() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.formData.password !== this.formData.repeat_password) {
            this.$message.error('确认密码和密码不一致！')
            return
          }
          let formObj = { ...this.formData,data_permission_depart_ids: this.formData.data_permission_depart_ids.join(',')}
          if (this.isEdit) {
            formObj.pkey = this.pkey
          }
          const { statusCode, errors } = await editAdminApi(formObj)
          this.confirmLoading = false
          if (statusCode == 200) {
            this.visible = false
            this.$message.success('保存成功！')
            this.$parent.getTableData()
          } else {
            this.$message.error(errors)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCancel() {
      this.visible = false
    },
    // 获取详情
    async getAdminDetail() {
      const {data} = await getAdminDetailApi({
        pkey: this.pkey
      })
      this.formData.user_name = data.user_name
      this.formData.real_name = data.real_name
      this.formData.role_key = data.role_key
      this.formData.remark = data.remark
      this.formData.position = data.position
      this.formData.data_permission_type = data.data_permission_type
      let data_permission_depart_ids = data.data_permission_depart_ids
      if(data_permission_depart_ids) {
        data_permission_depart_ids = data_permission_depart_ids.split(',')
      }else {
        data_permission_depart_ids = []
      }
      this.formData.data_permission_depart_ids = data_permission_depart_ids
    },
    // 获取部门
    async getDepartmentThreeList() {
      const { data } = await getDepartmentThreeListApi()
      this.departmentList = data
    },
    // 获取角色
    async getRoleList() {
      const { data } = await getRoleListApi()
      this.roleList = data
    },
  },
}
</script>
    
    <style lang="scss" scoped>
</style>